<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./lib/bootstrap-3.3.7-dist/css/bootstrap.css">
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./lib/swiper-5.4.5/swiper.css">
    <title>Document</title>
</head>

<body>
    <!-- 头部head部分 -->
    <div class="container-fluid nav">
        <div class="container">
            <header id="header">
                <div class="header-top">
                    <img src="./images/navbar_logo.png">
                    <span>1</span>
                    <span>购物车</span>
                    <span>登入/注册</span>
                </div>
                <div class="header-btn">
                    <a>
                        <span>★★聖誕新年趴踢★★</span>
                    </a>
                    <a>
                        <span>❤新品介紹</span>
                    </a>
                    <a>
                        <span>❤香水</span>
                    </a>
                    <a>
                        <span>★★聖誕新年趴踢★★</span>
                    </a>
                    <a>
                        <span>❤新品介紹</span>
                    </a>
                    <a>
                        <span>❤香水</span>
                    </a>
                    <a>
                        <span>★★聖誕新年趴踢★★</span>
                    </a>
                    <a>
                        <span>❤新品介紹</span>
                    </a>
                    <a>
                        <span>❤香水</span>
                    </a>
                </div>
            </header>
        </div>
    </div>
    <!-- <hr style="width: 100%; line-height: 4px; color: #007bff;"> -->
    <!----------- 大轮播图 ----------->
    <div class="container">
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <img src="./images/01.jpg">
                </div>
                <div class="swiper-slide">
                    <img src="./images/02.jpg">
                </div>
                <div class="swiper-slide">
                    <img src="./images/03.jpg">
                </div>
            </div>
            <!-- 如果需要分页器 -->
            <div class="swiper-pagination"></div>

            <!-- 如果需要导航按钮 -->
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>
        </div>
    </div>

    <!-------   畅销新品轮播图  ------->
    <div class="container newswiper">
        <div class="title_content">
            <p class="title">BESTSELLER & NEW</p>
            <p class="subtitle">暢銷及新品</p>
        </div>
        <div class="swiper-container2">
            <div class="swiper-wrapper">
                <!-- 畅销新品轮播图小框1 -->
                <div class="swiper-slide">
                    <div class="product_image">
                        <img src="./images/04.jpeg">
                    </div>
                    <div class="product_title">
                        氣味圖書館 Demeter <br>
                        【煉乳】 Condensed Milk 香水30ml
                    </div>
                    <div class="product_price">
                        <span class="price">NT$880</span>
                        <del>NT$1100</del>
                    </div>
                    <div class="product_btn">
                        <button class="btn btn-cart">
                            <span>加入購物車</span>
                        </button>
                    </div>
                </div>
                <!-- 畅销新品轮播图小框2 -->
                <div class="swiper-slide">
                    <div class="product_image">
                        <img src="./images/05.jpeg">
                    </div>
                    <div class="product_title">
                        氣味圖書館 Demeter <br>
                        【煉乳】 Condensed Milk 香水30ml
                    </div>
                    <div class="product_price">
                        <span class="price">NT$880</span>
                        <del>NT$1100</del>
                    </div>
                    <div class="product_btn">
                        <button class="btn btn-cart">
                            <span>加入購物車</span>
                        </button>
                    </div>
                </div>
                <!-- 畅销新品轮播图小框3 -->
                <div class="swiper-slide">
                    <div class="product_image">
                        <img src="./images/06.jpeg">
                    </div>
                    <div class="product_title">
                        氣味圖書館 Demeter <br>
                        【煉乳】 Condensed Milk 香水30ml
                    </div>
                    <div class="product_price">
                        <span class="price">NT$880</span>
                        <del>NT$1100</del>
                    </div>
                    <div class="product_btn">
                        <button class="btn btn-cart">
                            <span>加入購物車</span>
                        </button>
                    </div>
                </div>
                <!-- 畅销新品轮播图小框4 -->
                <div class="swiper-slide">
                    <div class="product_image">
                        <img src="./images/07.jpeg">
                    </div>
                    <div class="product_title">
                        氣味圖書館 Demeter <br>
                        【煉乳】 Condensed Milk 香水30ml
                    </div>
                    <div class="product_price">
                        <span class="price">NT$880</span>
                        <del>NT$1100</del>
                    </div>
                    <div class="product_btn">
                        <button class="btn btn-cart">
                            <span>加入購物車</span>
                        </button>
                    </div>
                </div>
            </div>
            <!-- 如果需要分页器 -->
            <!-- <div class="swiper-pagination2"></div> -->
            <!-- 如果需要导航按钮 -->
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>
        </div>
    </div>


    <!------------ 两张大图片 ------------->
    <div class="container index_2x2_block">
        <img class="index_2x2_block1" src="./images/index_2x2_block_1_md.jpg">
        <img class="index_2x2_block2" src="./images/index_2x2_block_2_md.jpg">
    </div>


    <!------------ 店长推荐 ------------>
    <div class="index_products container">
        <div class="title_content">
            <p class="title">強檔活動熱銷</p>
            <p class="subtitle">店長推薦</p>
        </div>
    
        <div class="row">
            <!-- 店长推荐小框1 -->
            <div class="col-lg-3">
                <div class="btn_love">
                    <a>❤</a>
                </div>
                <div class="product_image">
                    <img src="./images/04.jpeg">
                </div>
                <div class="product_title">
                    氣味圖書館 Demeter <br>
                    【煉乳】 Condensed Milk 香水30ml
                </div>
                <div class="product_price">
                    <span class="price">NT$880</span>
                    <del>NT$1100</del>
                </div>
                <div class="product_btn">
                    <button class="btn btn-cart">
                        <span>加入購物車</span>
                    </button>
                </div>
            </div>
            <!-- 店长推荐小框2 -->
            <div class="col-lg-3">
                <div class="btn_love">
                    <a>❤</a>
                </div>
                <div class="product_image">
                    <img src="./images/05.jpeg">
                </div>
                <div class="product_title">
                    氣味圖書館 Demeter <br>
                    【煉乳】 Condensed Milk 香水30ml
                </div>
                <div class="product_price">
                    <span class="price">NT$880</span>
                    <del>NT$1100</del>
                </div>
                <div class="product_btn">
                    <button class="btn btn-cart">
                        <span>加入購物車</span>
                    </button>
                </div>
            </div>
            <!-- 店长推荐小框3 -->
            <div class="col-lg-3">
                <div class="btn_love">
                    <a>❤</a>
                </div>
                <div class="product_image">
                    <img src="./images/06.jpeg">
                </div>
                <div class="product_title">
                    氣味圖書館 Demeter <br>
                    【煉乳】 Condensed Milk 香水30ml
                </div>
                <div class="product_price">
                    <span class="price">NT$880</span>
                    <del>NT$1100</del>
                </div>
                <div class="product_btn">
                    <button class="btn btn-cart">
                        <span>加入購物車</span>
                    </button>
                </div>
            </div>
            <!-- 店长推荐小框4 -->
            <div class="col-lg-3">
                <div class="btn_love">
                    <a>❤</a>
                </div>
                <div class="product_image">
                    <img src="./images/07.jpeg">
                </div>
                <div class="product_title">
                    氣味圖書館 Demeter <br>
                    【煉乳】 Condensed Milk 香水30ml
                </div>
                <div class="product_price">
                    <span class="price">NT$880</span>
                    <del>NT$1100</del>
                </div>
                <div class="product_btn">
                    <button class="btn btn-cart">
                        <span>加入購物車</span>
                    </button>
                </div>
            </div>
            <!-- 店长推荐小框2.1 -->
            <div class="col-lg-3">
                <div class="btn_love">
                    <a>❤</a>
                </div>
                <div class="product_image">
                    <img src="./images/04.jpeg">
                </div>
                <div class="product_title">
                    氣味圖書館 Demeter <br>
                    【煉乳】 Condensed Milk 香水30ml
                </div>
                <div class="product_price">
                    <span class="price">NT$880</span>
                    <del>NT$1100</del>
                </div>
                <div class="product_btn">
                    <button class="btn btn-cart">
                        <span>加入購物車</span>
                    </button>
                </div>
            </div>
            <!-- 店长推荐小框2.2 -->
            <div class="col-lg-3">
                <div class="btn_love">
                    <a>❤</a>
                </div>
                <div class="product_image">
                    <img src="./images/05.jpeg">
                </div>
                <div class="product_title">
                    氣味圖書館 Demeter <br>
                    【煉乳】 Condensed Milk 香水30ml
                </div>
                <div class="product_price">
                    <span class="price">NT$880</span>
                    <del>NT$1100</del>
                </div>
                <div class="product_btn">
                    <button class="btn btn-cart">
                        <span>加入購物車</span>
                    </button>
                </div>
            </div>
            <!-- 店长推荐小框2.3 -->
            <div class="col-lg-3">
                <div class="btn_love">
                    <a>❤</a>
                </div>
                <div class="product_image">
                    <img src="./images/06.jpeg">
                </div>
                <div class="product_title">
                    氣味圖書館 Demeter <br>
                    【煉乳】 Condensed Milk 香水30ml
                </div>
                <div class="product_price">
                    <span class="price">NT$880</span>
                    <del>NT$1100</del>
                </div>
                <div class="product_btn">
                    <button class="btn btn-cart">
                        <span>加入購物車</span>
                    </button>
                </div>
            </div>
            <!-- 店长推荐小框2.4 -->
            <div class="col-lg-3">
                <div class="btn_love">
                    <a>❤</a>
                </div>
                <div class="product_image">
                    <img src="./images/07.jpeg">
                </div>
                <div class="product_title">
                    氣味圖書館 Demeter <br>
                    【煉乳】 Condensed Milk 香水30ml
                </div>
                <div class="product_price">
                    <span class="price">NT$880</span>
                    <del>NT$1100</del>
                </div>
                <div class="product_btn">
                    <button class="btn btn-cart">
                        <span>加入購物車</span>
                    </button>
                </div>
            </div>
        </div>
    </div>


    <!--   index_blocks图片部分   -->
    <div class="container">
        <div class="index_blocks">
            <div class="block_item">
                <img src="./images/index_block_1.jpg" alt="">
            </div>
            <div class="block_item">
                <img src="./images/index_block_2.jpg" alt="">
            </div>
            <div class="block_item">
                <img src="./images/index_block_3.jpg" alt="">
            </div>
        </div>
    </div>


    <!-- 底部 -->
    <div class="container" id="footer">
        <div class="footer_content">

        </div>
    </div>



    <!--   头部吸顶效果   -->
    <script>
        var nav = document.querySelector('.nav')
        console.log(nav)
        window.onscroll = function () {
            var scrollTop = document.documentElement.scrollTop || document.body.scrollTop
            if (scrollTop >= 15) {
                console.log(123)
                nav.className = 'fx'
            } else {
                nav.className = ''
            }
        }
    </script>

    <!-- 大轮播图js -->
    <script src="./lib/swiper-5.4.5/swiper.js"></script>
    <script>
        var mySwiper = new Swiper('.swiper-container', {
            direction: 'horizontal', // 水平切换选项
            loop: true, // 循环模式选项
            // 如果需要分页器
            pagination: {
                el: '.swiper-pagination',
            },
            // 如果需要前进后退按钮
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
            // 自动轮播
            autoplay: true,
        })        
    </script>

    <!-- 畅销新品轮播图js -->
    <script>
        var swiper = new Swiper('.swiper-container2', {
            slidesPerView: 3,
            //   slide之间的距离
            //   spaceBetween: 30,
            //   pagination: {
            //     el: '.swiper-pagination2',
            //     clickable: true,
            //   },
            // 如果需要前进后退按钮
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
        });
    </script>

</body>

</html>